<template>
  <div class="img_box">
    <div
      class="img_title"
      v-for="(img, index) in imgData"
      :key="index"
      @click="handleClose(img.name)"
    >
      <img :src="img.url" alt="" />
      <p>{{ img.name }}</p>
    </div>

    <el-dialog top="5vh" width="90vw" :title="title" :visible.sync="drawer">
      <div class="search">
        <div class="search_box">
          <span>查询号码:</span
          ><el-input
            size="small"
            style="width: 200px; margin: 0 10px"
            v-model="user"
            placeholder="请输入查询号码"
          ></el-input>
          <span>活动时间:</span>
          <el-date-picker
            v-model="date1"
            style="width: 150px; margin: 0 5px"
            size="small"
            type="date"
            value-format="yyyyMMdd"
            placeholder="开始日期"
          >
          </el-date-picker>
          <el-time-select
            v-model="time1"
            style="width: 150px; margin: 0 5px"
            size="small"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '23:00',
            }"
            placeholder="开始时间"
          >
          </el-time-select>
          至
          <el-date-picker
            v-model="date2"
            style="width: 150px; margin: 0 5px"
            size="small"
            type="date"
            value-format="yyyyMMdd"
            placeholder="结束日期"
          >
          </el-date-picker>
          <el-time-select
            v-model="time2"
            size="small"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '23:00',
            }"
            placeholder="结束时间"
            style="width: 150px; margin: 0 5px"
          >
          </el-time-select>
          <el-button
            type="primary"
            size="small"
            style="margin: 0 5px"
            @click="query"
            >查询</el-button
          >
          <el-button size="small" style="margin: 0 5px" @click="reset"
            >重置</el-button
          >
        </div>

        <!-- <el-table
          :data="tableDatas"
          stripe
          height="30vh"
          @current-change="handleCurrentChange"
          highlight-current-row
        >
          <el-table-column prop="apn" label="企业apn" align="center">
          </el-table-column>
          <el-table-column prop="city_name" label="归属地市" align="center">
          </el-table-column>
          <el-table-column prop="domain" label="网络类型" align="center">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChanges"
          :current-page="pageNum"
          :page-sizes="[15, 50, 100, 200, 300]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination> -->
        <div class="search_result box" v-show="exhibit">
          <div class="search_muban">
            <div class="search_account">
              <h2>{{ pitchOn.msisdn }}</h2>
              <p>归属地市:{{ pitchOn.city_name }}</p>
              <p>APN: {{ pitchOn.apn }}</p>
              <p>IMEI: {{ pitchOn.imei }}</p>
              <p>终端: N/A</p>
              <p>总流量: {{ pitchOn.sum_throughput }}MB</p>
            </div>
            <div class="search_result">
              <h2>定界结果:</h2>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.attch_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span>ATTACH成功率: {{ pitchOn.tcp_ask_success_rate }}% </span>

                <span class="right" v-if="pitchOn.attch_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.dns_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span> DNS成功率: {{ pitchOn.dns_ask_success_rate }}% </span>

                <span class="right" v-if="pitchOn.dns_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.tcp_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span> TCP成功率:{{ pitchOn.tcp_ask_success_rate }}% </span>

                <span class="right" v-if="pitchOn.tcp_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.http_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span> HTTP成功率: {{ pitchOn.http_ask_success_rate }}% </span>

                <span class="right" v-if="pitchOn.http_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.pdp_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span>PDP成功率: {{ pitchOn.pdp_ask_success_rate }}% </span>

                <span class="right" v-if="pitchOn.pdp_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.http_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span>
                  TCP时延:
                  {{
                    parseFloat(pitchOn.tcp_create_time) +
                    parseFloat(pitchOn.tcp_suc_req_time)
                  }}ms
                </span>

                <span class="right" v-if="pitchOn.http_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.tcp12_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span> TCP12时延:{{ pitchOn.tcp_create_time }}ms </span>

                <span class="right" v-if="pitchOn.tcp12_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
              <p>
                <img
                  class="success"
                  v-if="pitchOn.tcp23_ok_flag == '正常'"
                  src="../../assets/image/success.png"
                  alt=""
                />
                <img
                  class="fail"
                  v-else
                  src="../../assets/image/fail.png"
                  alt=""
                />
                <span> TCP23时延: {{ pitchOn.tcp_suc_req_time }}ms </span>

                <span class="right" v-if="pitchOn.tcp23_ok_flag == '正常'"
                  >正常</span
                >
                <span class="right red" v-else>异常</span>
              </p>
            </div>
          </div>
          <h4>请求指数:</h4>
          <div class="statistical_muban">
            <div class="statistical_imgbox">
              <div
                class="statistical_title"
                v-for="(item, index) in img"
                :key="item.id"
                :class="{ pitch: index == 0 }"
                @click="choice(index, item.name)"
              >
                <div class="statistical_img">
                  <div :id="item.id"></div>
                </div>
                <!-- <div class="statistical_text">比平均值高：{{ pitchOn.tcp_ask_success_rate }}%</div> -->
                <img src="../../assets/image/arrow.png" alt="" />
              </div>
            </div>
            <div class="statistical_content">
              <h4>
                <span
                  ><span style="margin-right: 10px">{{ problems.title }}</span>
                  问题定界:</span
                >
                <span v-if="shiyantitle"
                  >成功率: {{ problems.time_delay }}%</span
                >
                <span v-else>时延:{{ problems.average_delay }}ms</span>
              </h4>
              <div class="classification">
                <div class="classification_left">
                  <div class="classification_title">
                    <img src="../../assets/image/user.png" alt="" />
                    <div class="classificatio_name">
                      <h4>用户测</h4>
                      <p v-if="problems.user.num !== 0">
                        <span>{{ problems.user.num }}</span>
                        <span>{{ problems.user.probability }}%</span>
                      </p>
                    </div>
                  </div>
                  <div class="classification_title">
                    <img src="../../assets/image/wireless.png" alt="" />
                    <div class="classificatio_name">
                      <h4>无线测</h4>
                      <p v-if="problems.wireless.num !== 0">
                        <span>{{ problems.wireless.num }}</span>
                        <span>{{ problems.wireless.probability }}%</span>
                      </p>
                    </div>
                  </div>
                  <div class="classification_title">
                    <img src="../../assets/image/core.png" alt="" />
                    <div class="classificatio_name">
                      <h4>核心网</h4>
                      <p v-if="problems.core.num !== 0">
                        <span>{{ problems.core.num }}</span>
                        <span>{{ problems.core.probability }}%</span>
                      </p>
                    </div>
                  </div>
                  <div class="classification_title">
                    <img src="../../assets/image/business.png" alt="" />
                    <div class="classificatio_name">
                      <h4>业务测</h4>
                      <p v-if="problems.business.num !== 0">
                        <span>{{ problems.business.num }}</span>
                        <span>{{ problems.business.probability }}%</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="classification_right">
                  <el-table
                    :data="tableData"
                    stripe
                    style="background-color: transparent; margin: auto"
                  >
                    <el-table-column prop="num" label="序号" align="center">
                    </el-table-column>
                    <el-table-column
                      prop="cityCode"
                      label="城市"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="businessCode"
                      label="企业"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="userCount"
                      label="用户数"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="attch_ask_success_rate"
                      label="附着成功率(%)"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="pdp_ask_success_rate"
                      label="PDP成功率(%)"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="tcp_ask_success_rate"
                      label="TCP成功率(%)"
                      align="center"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";
import { baseURL } from "../../utils/ipConfig";
export default {
  data() {
    return {
      title: "",
      distance: false,
      drawer: false,
      imgData: [
        {
          name: "溯源定界",
          url: require("../../assets/image/group1.png"),
        },
        {
          name: "XX专题",
          url: require("../../assets/image/group2.png"),
        },
        {
          name: "XX专题",
          url: require("../../assets/image/group3.png"),
        },
        {
          name: "新增专题",
          url: require("../../assets/image/group4.png"),
        },
      ],
      user: "",
      date1: "",
      date2: "",
      time1: "",
      time2: "",
      tableData: [],
      tableDatas: [],
      img: [
        {
          name: "ATTACH",
          id: "ATTACHsuccess",
          num: 0,
          text: 12,
        },
        {
          name: "DNS",
          id: "DNSsuccess",
          num: 0,
          text: 15,
        },
        {
          name: "TCP",
          id: "TCPsuccess",
          num: 0,
          text: 12,
        },
        {
          name: "HTTP",
          id: "HTTPsuccess",
          num: 0,
          text: 18,
        },
        {
          name: "PDP",
          id: "PDPsuccess",
          num: 0,
          text: 12,
        },
        {
          name: "TCP时延",
          id: "HTTPtimeDelay",
          num: 0,
          text: 12,
        },
        {
          name: "TCP12时延",
          id: "TCP12timeDelay",
          num: 0,
          text: 12,
        },
        {
          name: "TCP23时延",
          id: "TCP23timeDelay",
          num: 0,
          text: 30,
        },
      ],
      ATTACHsuccess: "",
      DNSsuccess: "",
      TCPsuccess: "",
      HTTPsuccess: "",
      PDPsuccess: "",
      HTTPtimeDelay: "",
      TCP12timeDelay: "",
      TCP23timeDelay: "",
      problems: {
        title: "ATTACH",
        time_delay: 0,
        average_delay: 0,
        user: {
          num: 0,
          probability: 0,
        },
        wireless: {
          num: 0,
          probability: 0,
        },
        core: {
          num: 0,
          probability: 0,
        },
        business: {
          num: 0,
          probability: 0,
        },
      },
      exhibit: false,
      total: 0,
      pageNum: 1,
      pageSize: 15,
      pitchOn: {},
      shiyantitle: true,
    };
  },
  watch: {
    pitchOn() {
      if (JSON.stringify(this.pitchOn) == "{}") {
        this.exhibit = false;
      }
    },
    drawer() {
      if (this.drawer == false) {
        this.user = "";
        this.imgData[0].url = require("../../assets/image/group1.png");
        let title = document.getElementsByClassName("img_title")[0];
        title.style.color = "#a6dbff";
      }
    },
    "problems.title"(newValue) {
      if (
        newValue == "TCP时延" ||
        newValue == "TCP12时延" ||
        newValue == "TCP23时延"
      ) {
        this.shiyantitle = false;
      } else {
        this.shiyantitle = true;
      }
    },

    // problems.title !== 'TCP时延' ||
    // problems.title !== 'TCP12时延' ||
    // problems.title !== 'TCP23时延'
  },
  mounted() {},
  methods: {
    getSourceDetectData() {
      let _this = this;
      let param = new URLSearchParams();
      param.append("msisdn", _this.user);
      param.append("pageNum", _this.pageNum);
      param.append("pageSize", _this.pageSize);
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getSourceDetectData`, param)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200 || resData.code == 0) {
            _this.tableDatas = resData.data;
            if (_this.total !== resData.count) {
              _this.total = resData.count;
            }
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    reset() {
      this.user = "";
      this.date1 = "";
      this.date2 = "";
      this.time1 = "";
      this.time2 = "";
    },
    // 图片点击
    handleClose(title) {
      if (title == "溯源定界") {
        this.title = title;
        this.drawer = true;
        this.imgData[0].url = require("../../assets/image/group1_active.png");
        let title = document.getElementsByClassName("img_title")[0];
        title.style.color = "#0a8deb";
        this.$nextTick(() => {
          this.ATTACHsuccess = document.getElementById("ATTACHsuccess");
          this.DNSsuccess = document.getElementById("DNSsuccess");
          this.TCPsuccess = document.getElementById("TCPsuccess");
          this.HTTPsuccess = document.getElementById("HTTPsuccess");
          this.PDPsuccess = document.getElementById("PDPsuccess");
          this.HTTPtimeDelay = document.getElementById("HTTPtimeDelay");
          this.TCP12timeDelay = document.getElementById("TCP12timeDelay");
          this.TCP23timeDelay = document.getElementById("TCP23timeDelay");
        });
      }
    },
    // 进度条统计图
    progressDar(id, name, num) {
      let myChart = this.$echarts.init(id);
      var option = {
        title: {
          text: name + "成功率",
          left: "center",
          top: "80%",
          textStyle: {
            color: "#6EA3FD",
            fontSize: 15,
          },
        },
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        series: [
          {
            name: name + "成功率",
            type: "gauge",
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "80%",
            startAngle: 200,
            endAngle: -20,
            center: ["50%", "60%"],
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.09, "lime"],
                  [0.82, "#1e90ff"],
                  [1, "#ff4500"],
                ],
                width: 3,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              distance: -15,
              fontSize: 12,
              // fontWeight: "bolder",
              color: "black",
            },
            axisTick: {
              // 坐标轴小标记
              length: -1, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "black",
                shadowBlur: 10,
              },
            },
            splitLine: {
              // 分隔线
              length: -3, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 1,
                color: "black",
              },
            },
            pointer: {
              // 指针
              width: 0,
              // length: 1,
              shadowBlur: 5,
            },
            title: {
              show: false,
            },
            detail: {
              shadowBlur: 5,
              formatter: "{value}%",
              offsetCenter: [0, "30%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 14,
                fontWeight: "bolder",
                color: "auto",
              },
            },
            data: [
              {
                value: "",
                name: "",
              },
            ],
          },
        ],
      };
      var color;
      if (num <= 20) {
        color = [
          [num / 100, "#EB3941"],
          [1, "#EDEFF2"],
        ];
      } else if (num <= 80) {
        color = [
          [num / 100, "#169AF8"],
          [1, "#EDEFF2"],
        ];
      } else {
        color = [
          [num / 100, "#87C6C7"],
          [1, "#EDEFF2"],
        ];
      }

      option.series[0].axisLine.lineStyle.color = color;
      option.series[0].data[0].value = num;
      option.series[0].data[0].name = "%";
      myChart.setOption(option);
    },
    // 仪盘图
    figure(id, name, num) {
      let max = 0;
      if (name == "TCP12") {
        max = 50;
      } else {
        max = 200;
      }
      let myChart = this.$echarts.init(id);
      var option = {
        title: {
          text: name + "时延",
          left: "center",
          top: "80%",
          textStyle: {
            color: "#6EA3FD",
            fontSize: 15,
          },
        },
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        series: [
          {
            name: name + "时延",
            type: "gauge",
            min: 0,
            max: max,
            splitNumber: 10,
            radius: "80%",
            startAngle: 180,
            endAngle: 0,
            center: ["50%", "60%"],
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.25, "#D0FED3"],
                  [0.5, "#1e90ff"],
                  [0.75, "#F4E285"],
                  [1, "#ff4500"],
                ],
                width: 1,
              },
            },
            axisLabel: {
              show: false,
              // 坐标轴小标记
              distance: 5,

              fontSize: 12,
              // fontWeight: "bolder",
              color: "black",
            },
            axisTick: {
              // 坐标轴小标记
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            splitLine: {
              // 分隔线
              length: 7, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 2,
                color: "auto",
              },
            },
            pointer: {
              // 分隔线
              width: 2,
              // length: 1,
              shadowBlur: 5,
            },
            title: {
              show: false,
            },
            detail: {
              shadowBlur: 5,
              formatter: "{value}ms",
              offsetCenter: [0, "30%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 14,
                fontWeight: "bolder",
                color: "auto",
              },
            },
            data: [
              {
                value: "",
                name: "",
              },
            ],
          },
        ],
      };
      var color;
      if (num <= 20) {
        color = [
          [num / 100, "#EB3941"],
          [1, "#EDEFF2"],
        ];
      } else if (num <= 80) {
        color = [
          [num / 100, "#169AF8"],
          [1, "#EDEFF2"],
        ];
      } else {
        color = [
          [num / 100, "#87C6C7"],
          [1, "#EDEFF2"],
        ];
      }
      option.series[0].data[0].value = num;
      option.series[0].data[0].name = "ms";
      myChart.setOption(option);
    },
    // 切换
    choice(idx, name) {
      $(`.statistical_imgbox .statistical_title:eq(${idx})`).addClass("pitch");
      $(`.statistical_imgbox .statistical_title:eq(${idx})`)
        .siblings()
        .removeClass("pitch");
      this.problems.title = name;
      if (name == "ATTACH") {
        this.problems.time_delay = this.pitchOn.attch_ask_success_rate;
      } else if (name == "DNS") {
        this.problems.time_delay = this.pitchOn.dns_ask_success_rate;
      } else if (name == "TCP") {
        this.problems.time_delay = this.pitchOn.tcp_ask_success_rate;
      } else if (name == "HTTP") {
        this.problems.time_delay = this.pitchOn.http_ask_success_rate;
      } else if (name == "PDP") {
        this.problems.time_delay = this.pitchOn.pdp_ask_success_rate;
      } else if (name == "TCP时延") {
        this.problems.average_delay = this.pitchOn.tcp_suc_req_time;
      } else if (name == "TCP12时延") {
        this.problems.average_delay = this.pitchOn.tcp_create_time;
      } else {
        this.problems.average_delay = this.pitchOn.tcp_suc_req_time;
      }
    },
    // 查询
    query() {
      let _this = this;
      let param = new URLSearchParams();
      param.append("msisdn", _this.user);
      param.append("startTime", _this.date1 + _this.time1.slice(0, 2));
      param.append("endTime", _this.date2 + _this.time2.slice(0, 2));
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getSourceDetectData`, param)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200 || resData.code == 0) {
            // _this.tableDatas = resData.data;
            // if (_this.total !== resData.count) {
            //   _this.total = resData.count;
            // }
            console.log(resData.data);
            _this.handleCurrentChange(resData.data[0]);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      this.exhibit = true;
      this.pitchOn = val;
      this.problems.time_delay = this.pitchOn.attch_ask_success_rate;
      this.progressDar(
        this.ATTACHsuccess,
        "ATTACH",
        this.pitchOn.attch_ask_success_rate
      );
      this.progressDar(
        this.DNSsuccess,
        "DNS",
        this.pitchOn.dns_ask_success_rate
      );
      this.progressDar(
        this.TCPsuccess,
        "TCP",
        this.pitchOn.tcp_ask_success_rate
      );
      this.progressDar(
        this.HTTPsuccess,
        "HTTP",
        this.pitchOn.http_ask_success_rate
      );
      this.progressDar(
        this.PDPsuccess,
        "PDP",
        this.pitchOn.pdp_ask_success_rate
      );
      this.figure(this.HTTPtimeDelay, "TCP", this.pitchOn.tcp_suc_req_time);
      this.figure(this.TCP12timeDelay, "TCP12", this.pitchOn.tcp_create_time);
      this.figure(this.TCP23timeDelay, "TCP23", this.pitchOn.tcp_suc_req_time);
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getCustomMonitoringData();
    },
    handleCurrentChanges(val) {
      this.pageNum = val;
      this.getCustomMonitoringData();
    },
  },
};
</script>

<style lang="scss" scoped>
.img_box {
  width: 21vw;
  height: 10vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
  }
  .img_title {
    color: #a6dbff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    &:nth-child(1) {
    cursor: pointer;
      // color: #0a8deb;
    }
  }
  .search {
    width: 100%;

    .search_box {
      padding: 1vw;
    }
    .search_result.box {
      width: 100%;
      margin-top: 30px;
      .search_muban {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        .search_account {
          width: 35%;
          height: 370px;
          padding: 1vw;
          background-color: #c2f8f8;
          h2 {
            font-size: 25px;
          }
          p {
            margin: 10px 0;
          }
        }
        .search_result {
          width: 60%;
          height: 370px;
          padding: 1vw;
          background-color: #c2f8f8;
          h2 {
            font-size: 25px;
          }
          p {
            margin: 10px 0;
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            position: relative;
            .success {
              width: 32px;
              height: 32px;
              margin-right: 5px;
            }
            .fail {
              padding: 3px;
              width: 25px;
              height: 25px;
              margin-right: 5px;
            }
            .right {
              position: absolute;
              right: 0%;
              font-weight: bolder;
            }
            .red {
              color: red;
            }
          }
        }
      }
      h4 {
        padding-left: 10px;
      }
      .statistical_muban {
        width: 100%;
        .statistical_imgbox {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          padding-bottom: 20px;
          .statistical_title {
            width: 200px;
            height: auto;
            position: relative;
            .statistical_img {
              #ATTACHsuccess,
              #DNSsuccess,
              #TCPsuccess,
              #HTTPsuccess,
              #PDPsuccess,
              #HTTPtimeDelay,
              #TCP12timeDelay,
              #TCP23timeDelay {
                width: 200px;
                height: 130px;
              }
            }
            .statistical_text {
              text-align: center;
            }
            img {
              display: none;
              width: 32px;
              height: 32px;
              position: absolute;
              bottom: -24%;
              left: 43%;
            }
          }
        }
        .statistical_content {
          width: 100%;
          height: 350px;
          background-color: #c2f8f8;
          border-top: 2px solid #1e8cc5;
          h4 {
            padding-top: 20px;
            padding-left: 20px;
            span {
              margin-right: 80px;
            }
          }
          .classification {
            height: 310px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            .classification_left {
              width: 40vw;
              height: 100%;
              display: flex;
              flex-flow: row wrap;
              justify-content: space-evenly;
              align-items: center;
              .classification_title {
                width: 40%;
                height: 110px;
                margin: 10px;
                text-align: left;
                background-color: #e7f7ff;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                .classificatio_name {
                  width: 60%;
                  height: 50px;
                  h4 {
                    padding: 0;
                  }
                  p {
                    margin-top: 5px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                  }
                }
              }
            }
            .classification_right {
              width: 55vw;
              height: 100%;
              padding: 0 1vw;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .img_box {
    width: 21vw;
    height: 10vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
    .img_title {
      color: #a6dbff;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
    .search {
      width: 100%;
      .search_box {
        padding: 1vw;
      }
      .search_result {
        width: 100%;
        .search_muban {
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          .search_account {
            width: 35%;
            height: 370px;
            padding: 1vw;
            background-color: #c2f8f8;
            h2 {
              font-size: 25px;
            }
            p {
              margin: 10px 0;
            }
          }
          .search_result {
            width: 60%;
            height: 370px;
            padding: 1vw;
            background-color: #c2f8f8;
            h2 {
              font-size: 25px;
            }
            p {
              margin: 10px 0;
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              .success {
                width: 32px;
                height: 32px;
                margin-right: 5px;
              }
              .fail {
                padding: 3px;
                width: 25px;
                height: 25px;
                margin-right: 5px;
              }
            }
          }
        }
        h4 {
          padding-left: 10px;
        }
        .statistical_muban {
          width: 100%;
          .statistical_imgbox {
            width: 100%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            padding-bottom: 20px;
            .statistical_title {
              width: 150px;
              height: auto;
              position: relative;
              .statistical_img {
                #ATTACHsuccess,
                #DNSsuccess,
                #TCPsuccess,
                #HTTPsuccess,
                #PDPsuccess,
                #HTTPtimeDelay,
                #TCP12timeDelay,
                #TCP23timeDelay {
                  width: 150px;
                  height: 130px;
                }
              }
              .statistical_text {
                text-align: center;
              }
              img {
                display: none;
                width: 32px;
                height: 32px;
                position: absolute;
                bottom: -24%;
                left: 43%;
              }
            }
          }
          .statistical_content {
            width: 100%;
            height: 350px;
            background-color: #c2f8f8;
            border-top: 2px solid #1e8cc5;
            h4 {
              padding-top: 20px;
              padding-left: 20px;
              span {
                margin-right: 80px;
              }
            }
            .classification {
              height: 310px;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              .classification_left {
                width: 40vw;
                height: 100%;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-evenly;
                align-items: center;
                .classification_title {
                  width: 40%;
                  height: 110px;
                  margin: 10px;
                  text-align: left;
                  background-color: #e7f7ff;
                  display: flex;
                  justify-content: space-evenly;
                  align-items: center;
                  .classificatio_name {
                    width: 60%;
                    height: 50px;
                    h4 {
                      padding: 0;
                    }
                    p {
                      margin-top: 5px;
                      display: flex;
                      flex-flow: row nowrap;
                      justify-content: space-between;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.pitch {
  img {
    display: block !important;
  }
}
</style>